<template>
  <div class="detail_container">
    <ProductParams :title="res.name">
      <template v-slot:buy>
        <slot name="buy">
          <button class="btn">立即购买</button>
        </slot>
      </template>
    </ProductParams>
    <div class="detail_bg1">
      <div class="bg1_title">{{res.desc}}</div>
      <div class="bg1_price"> {{res.price}}元</div>
    </div>
    <div class="detail_introduct"></div>
    <div class="detail_bg2">
      <img src="/img/product/product-bg-3.jpg" alt="">
    </div>
    <div class="video">
      <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
      <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
      <div class="video_img" @click="showSlide=true">
        <div class="btn_click"></div>
         <img src="/img/product/gallery-1.jpg" alt="">
      </div> 
      <div class="video-box">
            <div class="overlay" v-if="showSlide"></div>
            <div class="video" :class="{'slide':showSlide}">
              <div class="icon-close" @click="showSlide=false"></div>
              <video src="/img/product/video.mp4" controls autoplay muted></video>
            </div>
      </div>
      
    </div>
  </div>
</template>

<script> 
import ProductParams from '../components/ProductParams'
import {get} from '../assets/js/request'
import api from '../assets/js/api'
export default {
  data(){
    return {
      props:['id'],
      showSlide:false,
      res:{},
    }
  },
  watch:{
      //第一种方法（用户体验不好）
      //监听路由，强制刷新，避免传递了数据内容不变化
      $route (to, from) {
        this.$router.go(0)
      }

      //第二种   在activated里写created或者mounted的方法 配合keep-alive食用
  },
  async created(){
    // console.log(this.$route);
    let a = this.$route.params.id;
    let res = await get(api.product+a);
    this.res = res
    console.log(res);
    console.log("created");
  },
  components:{
    ProductParams,
  },
}
</script>

<style  lang="scss" scoped>
@import '../assets/css/mixin.scss';
.detail_container{ 
  width: 100%;
  .btn{
    width: 110px;
    height: 30px;
    background-color: #FF6600;
    color: white;
    margin-left: 10px;
  }
  .detail_bg1{
    width: 100%;
    height: 708px;
    background: url('/img/product/product-bg-1.jpg')  no-repeat center;
    padding-top: 10px;
    .bg1_title,.bg1_price{
      width: 400px;
      font-size: 26px;
      margin: 0 auto 30px;
      text-align: center;
      color:white;
    }
    .bg1_title{
      font-weight: 700;
      margin-top: 65px;
    }
    
  }
  .detail_introduct{
    width: 65%;
    height: 900px;
    margin: 38px auto;
    background-image: url('/img/product/product-bg-2.jpg');
    background-size: 100% 100%;
  }
  .detail_bg2{
    width: 100%;
    height: 643px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .video{
    width: 100%;
    height: 1041px;
    background-color: black;
    color: white;
    text-align: center;
    h2{
      font-size:60px;
      padding-top:82px;
      margin-bottom:47px;
    }
    p{
      font-size:24px;
      margin-bottom:58px;
    }
    .video_img{
      width: 50%;
      height: 50%;
      margin: 0 auto;
      position: relative;
      img{
        width: 100%;
        height: 100%;
      }
      .btn_click{
        position: absolute;
        width: 100px; 
        height: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50px,-50px);
        background-image: url('/img/click.png');
        background-repeat: no-repeat;
        background-size: 100% 100%; 
      }
    }
    .video{
      @include position(fixed,50%,-50%,1000px,400px);
      transform: translate(-50%,-50%);
      opacity: 0;
      &.slide{
        top:50%;
        opacity: 1;
        transition: all 2s;
      }
      .icon-close{
        @include positionImg(absolute,20px,20px,20px,20px,'/img/icon-close.png');
        z-index: 50;
        cursor: pointer;
      }
      video{
        width: 100%;
        height: 100%;
        object-fit: cover; //填充整个盒子 但其他超过的部分会隐藏
        outline: none;
      }
    }
  }
}
</style>